<!--fifth-input-box  组件输入展示框-->
<template>
  <div class="fifth-input-box" :class="{'border-width100':borderLength, 'active': border_active}">
      <span class="name"><i class="must-entry" v-if="hKind !== '0'">*</i>{{name}}</span>
      <p class="content">
        <span v-show="content === ''" class="box-img">
          <img src="../../assets/img/icon-03.png" alt="">
        </span>
        <span class="box-name" v-show="content !== ''">{{arrName}}</span>
      <!-- <img class="content-table" v-show="content !== ''"  src="../../assets/img/table.png" alt=""> -->
      </p>
  </div>
</template>

<script>
export default {
  name: '',

  data () {
    return {
      border_active: false, // 错误展示类
      table_name: '' // 业务名称
    }
  },
  props: {
    'name': {default: ''},
    'content': {default: () => {
      return ''
    }},
    'borderLength': {
      default: () => {
        return false
      }
      },
    // 0 不校验 1校验下是否为空 2校验下是否为数字
    'h-kind': {
      default: '0',
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['0', '1', '2', '3'].indexOf(value) !== -1
      }
    },
    "arr-name": {
      default: ''
    },
    // 用来校验 当变化的时候 一般提交的时候变化
    'h-check': {
      default: 0
    },
  },
  components: {},
  watch: {
    hCheck (after) {
      if (this.hKind === '1' && this.content.toString().trim() !== '') {
        this.border_active = false
      } else if (this.hKind === '1') {
        this.border_active = true
      }
      if (this.hKind === '2' && myClass.provingFloatTwo(this.content.toString())) {
        this.border_active = false
      } else if (this.hKind === '2') {
        this.border_active = true
      }
      if (this.hKind === '3' && /(^0$)|(^[1-9]+[0-9]*$)/.test(this.content.toString())) {
        this.border_active = false
      } else if (this.hKind === '3') {
        this.border_active = true
      }
    },
    content (after) {
      if (this.hKind === '1' && this.content.toString().trim() !== '') {
        this.$api.post(this.$apiPath.baseURL, this.$apiPath.url, {
        action_type: 'GetSubscribefee',
        FINANCEPROINST_ID: this.content
      }).then(res => {
        if (res && res.data && res.data.FinanceList && res.data.FinanceList.length > 0) {
          this.switchFunc(res.data.FinanceList[0].ACCEPT_TYPE)
        }
      })
        this.border_active = false
      } else if (this.hKind === '1') {
        this.border_active = true
      }
      if (this.hKind === '2' && myClass.provingFloatTwo(this.content.toString())) {
        this.border_active = false
      } else if (this.hKind === '2') {
        this.border_active = true
      }
      if (this.hKind === '3' && /(^0$)|(^[1-9]+[0-9]*$)/.test(this.content.toString())) {
        this.border_active = false
      } else if (this.hKind === '3') {
        this.border_active = true
      }
    }
  },
  computed: {
    contentId () {
      return this.content === '' ? '' : this.content
    }
  },

  methods: {
    switchFunc (id) {
      switch (id.toString()) {
        case '401101':
          this.table_name = '行政资产申购'
          break
        case '401102':
          this.table_name = '公务接待'
          break
      }
      this.$emit('strange', {name: this.table_name})
    }
  },

  mounted () {}
}
</script>
<style lang="stylus" scoped>
$rem = 2.5
.fifth-input-box
  position relative
  display flex
  justify-content flex-start
  align-items center 
  padding  0.5rem * $rem  0.18rem * $rem 0.5rem * $rem 0.22rem * $rem
  &::after
    content ""
    position absolute
    bottom 0
    left 0
    right 0
    margin 0 auto
    width 100%
    height 0.02rem * $rem
    background-color #dddddd
  &.active::after
    background-color #ff0000
  &.border-width100:after
    width calc(100% - 1rem)
    width 100%
  .name
    color #1a1e24
    font-weight bold
    padding-right 0.1rem * $rem
    font-size 0.3rem * $rem
    .must-entry
      position absolute
      display flex
      align-items center
      height 100%
      top 0
      left 0.06rem * $rem
      font-size 0.3rem * $rem
      color #ff6b6b
      font-style normal
      line-height normal
  .content
    display flex
    justify-content flex-end
    align-items center
    color #666666
    font-size 0
    height 0.6rem * $rem
    line-height 0.6rem * $rem
    flex 1 1 auto
    .box-img
      width 0.6rem * $rem
      height 0.6rem * $rem
      img
        width 100%
        height 100%
    .box-name
      font-size 0.27rem * $rem
      color #333
  .financial-reimbursement-chakanshenpidan
    font-weight bold
    .content-table
      width 1rem * $rem
</style>
